<template>
    <div class="userManagement-list-page">
        <Row>
            <Col :xs="24">
                <Button type="primary" @click="handleAddUser" class='add' style="width:51px;height:35px;">             
                    <i class = "iconfont icon-add"></i>
                </Button> 
                <div class="margin-up-down">
                    <storeSelectChoose :key="filterObj" v-model="filterObj.params.hospitalId" />
                </div>
                <div class="margin-up-down">
                    <i-input class="input" v-model.trim="filterObj.params.loginName" placeholder="账号"></i-input>
                </div>
                <div class="margin-up-down">
                    <i-input class="input" v-model.trim="filterObj.params.name" placeholder="姓名" ></i-input>
                </div>
                <div class="margin-up-down">
                    <i-select class="select" v-model.trim="filterObj.params.doctorId" placeholder="用户类型">
                        <i-option value="99">全部用户类型</i-option>
                        <i-option value="1">药师</i-option>
                        <i-option value="0">药店工作人员</i-option>
                    </i-select>
                </div>
                <div class="margin-up-down">
                    <Button style="width:51px;height:35px;" type="primary" class='btn' @click="handleSearch"><i class = "iconfont icon-chaxun" ></i></Button>
                    <Button style="width:51px;height:35px;" class="btn" @click="handleReset"><i class = "iconfont icon-gengxin"></i></Button>  
                </div>
            </Col>
        </Row>
        <div class="table">
            <Table
                size="small"
                :columns="columns"
                :data="tableData"
                @on-selection-change="selectChange"
                :loading="tableLoading"
                no-data-text="未查询到符合条件的记录"
                stripe
            ></Table>
                <div class="page">
                    <Page :current="current" :total="count" show-total @on-change="loadPage" show-elevator/>
                </div>
            
        </div>
    <!-- 禁用启用确认弹窗 -->
        <Modal
            v-model="showDelModal"
            :title='curItem.status==0?"启用当前用户":"禁用当前用户"'
            class="userManagement-list-delModal">
            <div class="content">
                <p class="tip">{{curItem.status==0?'确定启用':'确定禁用'}}<span class="hospitalName">{{xxx}}</span>用户吗？</p>
                <p class="zhu" v-if='curItem.status==1'>注：禁用后该用户不可登录药店端，需要重新建立。</p>
                <div slot="footer">
                    <div class="btn-group">
                        <Button style="width:75px;height:35px;" class="left btn" type="primary" :loading="delBtnLoading" @click="handleDel">{{curItem.status==0?'确定启用':'确定禁用'}}</Button>
                        <Button style="width:75px;height:35px;" class="right btn" @click="showDelModal = false">取消</Button>
                    </div>
                </div>
            </div>
        </Modal>
    </div>
</template>
<script>
const filterObj = {
    pageNo: 1,
    pageSize: 10,
    current:1,
    params: {
        hospitalId: null,
        name: null,
        loginName: null,
        doctorId: 99,
    }
};
import api from "@/api/commonApi";
import { Page } from "view-design";
import storeSelectChoose from "@/components/choose/storeSelectChoose";
export default {
    components: {
        storeSelectChoose
    },
    data() {
        return {
            xxx:null,
            filterObj: this.deepClone(filterObj),
            count: 0,
            columns: [
                { type: "sum", title: "序号", width: 60, align: "center",
                    render: (h, params) => {
                        let sum = (this.filterObj.pageNo-1)*this.filterObj.pageSize + params.index +1;
                        return h("span", sum);
                    }
                },
                { title: "姓名", key: "name", align: "center" },
                { title: "性别", key: "gender", align: "center", render: (h, p) => [null, '男', '女'][p.row.gender]},
                { title: "手机号", key: "phone", align: "center" },
                { title: "用户类型", key: "userType", align: "center", render: (h, p) => p.row.doctorId ? '药师' : '药店工作人员'},
                { title: "账号", key: "loginName", align: "center" },
                { title: "出生年月", key: "birthday", align: "center" },
                { title: "邮箱地址", key: "email", align: "center" },
                {
                title: "设置",
                key: "iOperate",
                width: 200,
                render: (h, params) => {
                    return h("div", [
                    h(
                        "Button",
                        {
                        props: {
                            type: "primary",
                            size: "small"
                        },
                        style: {
                            margin: "0px 6px"
                        },
                        on: {
                            click: () => {
                            this.handleEdit(params);
                            }
                        }
                        },
                        "设置"
                    ),
                    h(
                        "Button",
                        {
                        props: {
                            size: "small"
                        },
                        class:{green:params.row.status==0,red:params.row.status!=0},
                        style: {
                            margin: "0px 6px"
                            // background:#21c780;
                        },
                        on: {
                            click: () => {
                            this.handleRemove(params);
                            //0 是禁用 1 是启用
                            }
                        }
                        },
                        params.row.status==0?"启用":"禁用"
                    )
                    ]);
                }
                }
            ],
            tableData: [],
            tableLoading: false,
            showDelModal: false,
            curItem: {status:0},  // 当前选中项
            delBtnLoading: false,
        };
    },
    created() {
        let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "",
                title: "药店端账号权限配置"
            },
            {
                path: "/index/drugfirmsmanage/usermanagement/index",
                title: "药店端用户管理"
            }
        ];
        this.$emit("changeBreadList", breadList);
        const filterObj = this.$route.query.filterObj;
        filterObj && (this.filterObj = JSON.parse(decodeURIComponent(filterObj)));
    },
    mounted() {
        this.storeManagementUserPage();
        // if (this.mode === 'edit') {
        //     this.storeManagementUserDetail();
        // }
    },
    methods: {
        loadPage(index) {
            this.filterObj.pageNo = index;
            this.current = index;
            this.storeManagementUserPage();
        },
        handleSearch() {
            this.filterObj.pageNo=1
            this.current=1
            this.storeManagementUserPage();
        },
        handleAddUser() {
            this.jumpTo("/index/drugfirmsmanage/usermanagement/add");
        },
        jumpTo(path) {
            this.$router.push({
                path,
                query: {
                    filterObj: encodeURIComponent(JSON.stringify(this.filterObj))
                }
            });
        },
        handleReset() {
            this.filterObj = this.deepClone(filterObj);
            this.filterObj.pageNo=1
            this.current=1
            this.storeManagementUserPage(1);
        },
        handleRemove(record) {
            this.xxx=record.row.name
            this.curItem = record.row;
            this.showDelModal = true;
        },
        handleDel(record) {
            if(this.curItem.status){
                this.curItem.status =0;
            }else{
                this.curItem.status =1;
            }
            this.storeManagementUserDelete(this.curItem)
        },
        handleEdit(record) {
            this.$router.push({
                path:'/index/drugfirmsmanage/usermanagement/add',
                query: {'id':record.row.id}});
        },
        storeManagementUserPage() {
            const reqData = {
                pageNo: this.filterObj.pageNo,
                pageSize: this.filterObj.pageSize,
                searchKey: this.filterObj.params.name,
                loginName: this.filterObj.params.loginName,
                doctorId: this.filterObj.params.doctorId,
                hospitalId: this.filterObj.params.hospitalId,
            };
            this.tableLoading = true;
            this.$axios.post(api.storeManagementUserPage, reqData).then(res => {
                if (res.data.code !== 1) {
                    this.$Message.error(res.data.message);
                } else {
                    const { records, total, pages,current } = res.data.object;
                    this.tableData = records;
                    this.count = total;
                    this.current = current;
                    if (!this.tableData.length && (current !== 1)) {
                        this.filterObj.pageNo = this.filterObj.current;
                        this.storeManagementUserPage();
                    }
                }
                this.tableLoading = false;
            })
            .catch(res => {
                this.tableLoading = false;
            });
        },
        storeManagementUserDelete(id) {
            this.delBtnLoading = true;
            let data={
                id: this.curItem.id,
            }
            this.$axios
            .post(api.storeManagementUserDelete,data)
            .then(res => {
                if (res.data.code !== 1) {
                    this.$Message.error(res.data.message);
                } else {
                    this.$Message.success('操作成功');
                    this.showDelModal = false;
                    this.storeManagementUserPage();
                }
                this.delBtnLoading = false;
            })
            .catch(res => {
                this.delBtnLoading = false;
            });
        },
        deepClone(obj) {
            return JSON.parse(JSON.stringify(obj))
        }
    },
    watch: {
        "filterObj.pageSize"(nv, ov) {
        this.filterObj.pageNo = 1;
        this.storeManagementUserPage();
        }
    }
};
</script>
<style scoped lang="less">
/deep/ .green{
    background:#21c780 !important;
    color:#fff;
}
/deep/.red{
    background:#ed3f14 !important;
    color:#fff;
}
.add{
    background:#21c780;
    border:none;
    outline:none;
    i{
        font-size:14px;
    }
}
    .downright{
        float:right !important;
    }
    .userManagement-list-page {
        margin-left: 1%;
        padding: 10px;
        width: 98%;
        background: #ffffff;
        box-sizing: border-box;
        .margin-up-down {
            display: inline-block;
            margin-top: 10px;
            margin-bottom: 10px;
            .select{
                width: 220px !important;
            } 
            i{
                font-size:14px !important;margin-right:5px !important;padding:0;
            }
        }
        header {
            margin-bottom: 10px;
            position: relative;
            .filter-part {
                display: flex;
                flex-wrap: wrap;
                .filter-item {
                    display: flex;
                    margin: 10px 10px 10px 0;
                    label {
                        white-space: nowrap;
                        line-height: 32px;
                        text-align: right;
                    }
                    .input {
                        width: 220px !important;
                    }
                    .select {
                        text-align: center;
                        width: 106px;
                    }
                }
                .filter-btn-group {
                    margin: 10px 10px 10px 0;
                    flex: 0 0 auto;
                    .btn {
                        width: 80px;
                        &:first-child {
                            margin-right: 10px;
                            margin-left: 20px;
                        }  
                    }
                }
            }
            .fun-part {
            position: absolute;
                top: 10px;
                right: 0;
                a {
                    vertical-align: bottom;
                }
            }
        }
        .page{
            text-align: center;
            margin:5px 0;
        }
    }
    .userManagement-list-delModal {
        /deep/ .ivu-modal-wrap {
            .ivu-modal-footer {
                display: none;
            }
            .ivu-modal-content{
                border:1px solid  #7581e7;
            }
            .btn-group {
                padding-top: 10px;
                text-align: center;
                .left {
                    margin-right: 20px;
                }
                .right {
                    margin-left: 20px;
                }
            }
            .content {
                text-align: center;
                .tip {
                    padding-bottom: 10px;
                    .hospitalName {
                        font-size:14px;
                        color: rgb(253, 120, 58);
                    }
                }
            }
        }
    }
</style>